<template>
  <div class="like">
    <div class="like_nav">
      <span
        v-for="item in likeNav"
        :key="item.id"
        :class="activeLikeNavId === item.id ? 'active' : null"
        @click="like_nav_click(item.id)"
      >
        {{ item.title }}
      </span>
    </div>
    <template>
      <!-- 应该把 id 传递给它 -->
      <!-- 用户喜欢的歌曲列表 -->
      <likeSongListComponent
        v-if="likeSongsIdsList.length != 0 && activeLikeNavId == 0"
        :songsIdsList="likeSongsIdsList"
        @refreshUserLikeSongAlbum="refreshUserLikeSongAlbum"
      />
      <!-- 用户喜欢的歌单列表 -->
      <likeAlbumListComponent v-if="activeLikeNavId == 1" />
      <!-- 用户喜欢的 mv 列表 -->
      <likeMvListComponent v-if="activeLikeNavId == 2" />
    </template>
  </div>
</template>

<script>
import { getUserLikeSong, getSongDetails } from "../../../api/myMusicApi";
import { mapState, mapMutations, mapActions } from "vuex";
import likeSongListComponent from "./like/likeSongList";
import likeAlbumListComponent from "./like/likeAlbumList.vue";
import likeMvListComponent from "./like/likeMvList.vue";
export default {
  name: "like",
  components: {
    likeSongListComponent,
    likeAlbumListComponent,
    likeMvListComponent,
  },
  data() {
    return {
      likeNav: [
        { id: 0, title: "歌曲" },
        { id: 1, title: "歌单" },
        { id: 2, title: "视频" },
      ],
      activeLikeNavId: 0,
      likeSongsIdsList: [], // 喜欢的歌曲列表
    };
  },
  created() {
    this.getUserLikeSongMethod();
  },
  methods: {
    // 获取用户喜欢的歌曲 id 列表
    async getUserLikeSongMethod() {
      let result = await getUserLikeSong(this.userStoreProfile.userId);
      if (result.code === 200) {
        this.likeSongsIdsList = result.ids;
        // let songsDeatilResult = await getSongDetails(songlistIds.join(","));
        // if (songsDeatilResult.code === 200) {
        //   this.likeSongsList = songsDeatilResult.songs;
        // }
      }
    },
    // 歌曲 组件，  进行了删除 某歌曲的操作
    async refreshUserLikeSongAlbum() {
      console.log("删除了操作");
      await this.getUserLikeSongMethod();
    },
    like_nav_click(id) {
      this.activeLikeNavId = id;
    },
  },
  computed: {
    ...mapState({
      userStoreProfile: (state) => state.userStore.profile,
      userStoreCookie: (state) => state.userStore.cookie,
      userStoreToken: (state) => state.userStore.token,
      userStoreUserDetail: (state) => state.userStore.userDetail,
    }),
  },
};
</script>

<style lang="less" scoped>
.like {
  /deep/ .el-tabs__item.is-active {
    color: @globalColor;
  }
  /deep/ .el-tabs .el-tabs__active-bar {
    background-color: @globalColor;
  }
  /deep/ .el-tabs .el-tabs__item {
    &:hover {
      color: @globalColor;
    }
  }
  .like_nav {
    span {
      padding: 0 5px;
      margin-right: 20px;
      cursor: pointer;
      &.active {
        color: @globalColor;
      }
      &:hover {
        color: @globalColor;
      }
    }
  }
}
</style>
